<template>
  <div id="Map" class="container">
  </div>
</template>
<script lang="ts" setup>
import useMap from "@/Hook/useMap"
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium'
import { onMounted } from 'vue'
const { initMap } = useMap('Map')
let index = 0
onMounted(() => {
  initMap((map) => {
    console.log(map)
    addDemoGraphics(map)
  })
})
const getColor = () => {
  const arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]
  return arrColor[++index % arrColor.length]
}
// url: "//data.mars3d.cn/file/geojson/areas/340100.json",
//     mask: true, // 标识为遮罩层【重点参数】
//     symbol: {
//       styleOptions: {
//         fill: true,
//         // color: "rgb(2,26,79)",
//         // opacity: 0.9,
//         outline: true,
//         // outlineColor: "#39E09B",
//         // outlineWidth: 8,
//         // outlineOpacity: 0.8,
//         // arcType: Cesium.ArcType.GEODESIC,
//         // global: false, // 是否全球遮罩，false时为中国区域
//         clampToGround: true
//       }
//     }

const addDemoGraphics = (map) => {
  const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
    name: "安徽各市",
    url: "/china.geojson",
    mask: false, // 标识为遮罩层【重点参数】
    symbol: {
      styleOptions: {
        fill: true,
        color: "rgb(0,0,0)",
        opacity: 1,
        outline: true,
        outlineColor: "#39E09B",
        outlineWidth: 8,
        outlineOpacity: 0.8,
        arcType: Cesium.ArcType.GEODESIC,
        global: true, // 是否全球遮罩，false时为中国区域
        clampToGround: true,
      },
    },
    // symbol: {
    //   type: "polygon",
    //   styleOptions: {
    //     fill: true,
    //     color: "rgb(2,26,79)",
    //     clampToGround: true,
    //     materialType: mars3d.MaterialType.PolyGradient, // 重要参数，指定材质
    //     materialOptions: {
    //       color: "#3388cc",
    //       opacity: 0.7,
    //       alphaPower: 1.3
    //     },
    //     // 面中心点，显示文字的配置
    //     label: {
    //       text: "{name}", // 对应的属性名称
    //       opacity: 1,
    //       font_size: 25,
    //       color: "#fff",
    //       font_family: "楷体",
    //       outline: false,
    //       scaleByDistance: true,
    //       scaleByDistance_far: 20000000,
    //       scaleByDistance_farValue: 0.1,
    //       scaleByDistance_near: 1000,
    //       scaleByDistance_nearValue: 1
    //     }
    //   },
    //   // callback: function (attr, styleOpt) {
    //   //   const randomHeight = (attr.childrenNum || 1) * 500 // 测试的高度
    //   //   return {
    //   //     materialOptions: {
    //   //       color: getColor()
    //   //     },
    //   //     height: 0,
    //   //     diffHeight: randomHeight
    //   //   }
    //   // }
    // },
    // popup: "{name}"
  })
  map.addLayer(geoJsonLayer)

  // 绑定事件
  geoJsonLayer.on(mars3d.EventType.load, function (event) {
    console.log("数据加载完成", event)
  })
  geoJsonLayer.on(mars3d.EventType.click, function (event) {
    console.log("单击了图层", event)
  })
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 90px);
}
</style>